import React, { Component } from 'react'
import SuperTable from '../zidingyiFile/SuperTable.js'
import axios from 'axios'
import { baseUrl, upload } from '../helper/baseUrl.js'
import CaipinForm from '../component/CaipinForm.js'
import ShowPic from '../zidingyiFile/ShowPic.js'


export default class Caiping extends Component {

  state ={
    caipinList: [],
    showForm: false,
    isUpdate: false,
    checkedCaipin: [],
    leibieSelect: [],
    imgUrl: ''
  }

  componentDidMount() {
    this.xuanran()
    // this.getData()
    // this.getLeibieData()
  }

  xuanran = () => {
    const that = this

    const getLeibieData =() =>{
      return axios({
        method: 'get',
        url: baseUrl + 'dc_caipinfenlei?transform=1&order=id,desc& page=1,5'
      }).then((res) => {
        return res.data.dc_caipinfenlei
        // return res.data.dc_caipinfenlei
        // this.setState({ leibieSelect:  res.data.dc_caipinfenlei})
      }).catch()
    }


    const getData =() =>{
     return  axios({
        method: 'get',
        url: baseUrl +'dc_caipin?transform=1&order=id,desc&page=1,10'
      }).then((res) => {
        return res.data.dc_caipin
        // return res.data.dc_caipin
        // this.setState({ caipinList: res.data.dc_caipin })
      }).catch()
    }

    axios.all([getLeibieData(), getData()])
      .then(axios.spread(function (leibie, caidan){
        // console.log(caidan)   // caidan
        caidan.map(cai =>{
          leibie.map(cal =>{
            if (cai.classify === cal.id){
              cai.classify = cal.foodtype
            }
        })
      })
        that.setState({ leibieSelect: leibie})
        that.setState({ caipinList: caidan})
      // caipinList
    })) 
  }


  updateCaiP=()=>{
    if (this.state.checkedCaipin.length===0){
      alert('请选择一个进行修改！')
    }else{
      this.setState({ showForm: true, isUpdate: true })
    }
  
  }


  showForm=()=>{
    this.setState({ showForm: true, isUpdate: false })
  }


  closeForm=()=>{
    this.setState({ showForm: false })
  }


  saveHandle = (cp) => {
    let method = 'post', url = baseUrl + 'dc_caipin'
    this.state.leibieSelect.map((c,i)=>{
      if (c.foodtype == cp.classify) {
        cp.classify = c.id
      }
    })
    // console.log(cp.classify)
 
    if (this.state.isUpdate) {
      method = 'put',
        url += '/' + cp.id
    }
    axios({
      method: method,
      url: url,
      data: cp,
    }).then(res => {
      this.xuanran()
      this.closeForm()
    })
  }


  deleteCaiP=()=>{
    let caipIds = []
    // console.log(this.state.checkedCaipin)
    this.state.checkedCaipin.map(cai=>{
      return caipIds.push(cai.id)
      caipIds = caipIds.splice(',')
    })
    // console.log(caipIds)
    axios({
      method:'delete',
      url: baseUrl + 'dc_caipin/' + caipIds,
    }).then(res=>{
      // console.log(res)
      this.xuanran()
    })
  
  }

  showPic=(sName)=>{
    this.setState({ imgUrl: sName})
  }

  closeImg = () => {
    this.setState({imgUrl: ''})
  }


  render() {

    const columns = [
      { title: '名称', dataIndex: 'foodname' },
      { title: '价格(元)', dataIndex: 'price' },
      { title: '类别', dataIndex: 'classify' },
      { title: '备注', dataIndex: 'description' },
      { title: '创建时间', dataIndex: 'createtime' },
      {
        title: '图片', dataIndex: 'img',
        render: (record) => {
          // console.log('record',record)
          if (record.img) {
            return <a href="javascript:;" onClick={this.showPic.bind(null, record.img)}>查看</a>
          } else {
            return <span>无图片</span>
          } 
        }
      }
    ] 

    const rowSelection = {
      onSelect: (seleted, selectedRows) => {
        this.setState({ checkedCaipin: selectedRows })
      }
    }
    
    return (
      <div>
        <section className="content-header">
          <h1>菜品管理</h1>
          <ol className="breadcrumb">
            <li><a href="#"><i className="fa fa-dashboard"></i>首页</a></li>
            <li className="active">类别管理</li>
          </ol>
          <div className="row">
            <div className="btn-group col-md-9" style={{ marginTop: 20 }}>
              <button type="button" className="btn btn-primary" onClick={this.showForm}>新增菜品</button>
              <button type="button" className="btn btn-warning" onClick={this.updateCaiP}>修改</button>
              <button type="button" className="btn btn-danger" onClick={this.deleteCaiP}>删除</button>
            </div>
            {/* <div className="input-group input-group-sm col-md-3">
              <input type="text" className="form-control" />
              <span className="input-group-btn">
                <button type="button" className="btn btn-info btn-flat">搜索</button>
              </span>
            </div> */}
          </div>
        </section>
        <SuperTable 
        columns={columns}
        dataSource={this.state.caipinList}
        rowSelection={rowSelection}
        showIndex={true}
        />
        {
          this.state.showForm && <CaipinForm
          closeForm={this.closeForm}
          isUpdate={this.state.isUpdate}
          saveHandle={this.saveHandle}
          updateCaiP={this.updateCaiP}
          deleteCaiP={this.deleteCaiP}
          caipin={this.state.checkedCaipin[0]}
          leibieSelect={this.state.leibieSelect}
          />
        }
        {
          this.state.imgUrl && <ShowPic src={upload + this.state.imgUrl} closeImg={this.closeImg} />
        }
      </div>
    )
  }
}
